<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
       GET  http://www.liulongbin.top:3009/api/get
       POST http://www.liulongbin.top:3009/api/post
  -->
  <script>
    // 目标：使用myAxios发送post请求 还可以带上data请求体的数据（json数据 + 键值对数据）

    function myAxios(config) {
      // config 是配置对象 {method, url, params, success}
      // console.log('执行了函数', config)

      // 原生ajax代码通过 XMLHttpRequest实现的
      let xhr = new XMLHttpRequest()

      // 添加判断，判断是否有params，有的话才处理
      if (config.params) {
        // if成立，说明是否有params的
        // console.log('有params', config.params)

        // 需要在url?键=值&键=值
        // config.url += '?a=1&b=2' // 查询参数是写死的值

        // 如何把params对象{a: 1, b: 2}  处理成  a=1&b=2格式
        let arr = []
        for (let k in config.params) {
          arr.push(`${k}=${config.params[k]}`)
        }
        config.url += `?${arr.join('&')}`
      }

      xhr.open(config.method, config.url)

      // 在判断，是否有data请求体数据，还需要判断请求方式是否不为get
      // 字符串有 toUpperCase() 转大写    有 toLowerCase() 转小写
      if (config.data && config.method.toUpperCase() !== 'GET') {
        // 说明有data请求体数据 并且 请求方式为 post delete put ... 需要设置请求体数据
        // 不仅仅需要send请求体数据，还需要对请求体数据类型做判断，从而来设置比相对应的Content-Type请求头信息
        // xhr.send(请求体数据)
        // console.log('有data请求体数据 并且 请求方式为 post delete put ..')

        // 判断请求体的数据是否为FormData格式数据  
        // 实例对象 instanceof 构造函数
        // console.log(config.data instanceof FormData)

        if (config.data instanceof FormData) {
          // if成立，说明请求体的数据为FormData格式数据 
          xhr.send(config.data)
        } else if (typeof config.data === 'object') {
          // if成立，说明请求体的数据为js对象，但是在发送的时候，需要将其处理成json字符串

          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(JSON.stringify(config.data))
        } else if (typeof config.data === 'string') {
          // if成立，说明请求体的数据为键值的字符串  
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
          xhr.send(config.data)
        }
      } else {
        // 不需要设置请求体数据
        // console.log('不需要设置请求体数据')
        xhr.send()
      }

      // 获取服务器响应结果
      xhr.addEventListener('load', function () {
        // console.log(xhr.response)

        // 当load事件触发的时候，来执行config对象的success函数
        // 把服务器响应结果xhr.response先转成js对象，在作为success函数的实参传递给了形参result
        config.success(JSON.parse(xhr.response))
      })
    }

    // 使用myAxios发送post请求
    myAxios({
      method: 'POST', // POST post PosT
      url: 'http://www.liulongbin.top:3009/api/post',
      params: {
        a: 10,
        b: 20,
        username: 'zs'
      },
      // 请求体数据
      // data: fd, // 是FormData格式的数据  👌
      // data: {
      //   h: 8,
      //   o: 6
      // }, // 本质上json字符串数据          👌
      data: 'name=lw&age=19', // 字符串    👌
      success: function (result) {
        // success 回调函数，在请求成功的时候回来执行，并且形参result获取到服务器响应结果
        //  替代了then()
        // console.log('success 函数执行了吗')
        console.log(result) // js对象  是服务器响应的结果
      }
    })
  </script>
</body>

</html>